<template>
	<view class="default-background">
		<view class="edit-page">
			<view class="logo-bar">
				<image :src="user.showLogo ? user.showLogo : '../../static/logo.png'" class="user-logo" @click="selectLogo" mode="aspectFill"></image>
			</view>
			<view class="info-group">
				<view class="info-item">
					<view class="item-text">用户名：</view>
					<input class="item-input" v-model="user.username" maxlength="10"></input>
				</view>
				<view class="info-item">
					<view class="item-text">密码：</view>
					<input class="item-input" password="true" v-model="user.password" maxlength="40"></input>
				</view>
				<view class="info-item">
					<view class="item-text">真实姓名：</view>
					<input class="item-input" v-model="user.realName" maxlength="5"></input>
				</view>
				<view class="info-item" @click="notChange('手机号一经注册')">
					<view class="item-text">手机号：</view>
					<input class="item-input" v-model="user.phone" disabled="disabled" maxlength="11"></input>
				</view>
				<view class="info-item">
					<view class="item-text">电子邮箱：</view>
					<input class="item-input" v-model="user.email" maxlength="20"></input>
				</view>
				<view class="info-item">
					<view class="item-text">年龄：</view>
					<input class="item-input" v-model="user.age" type="number" maxlength="3"></input>
				</view>
				<view class="info-item">
					<view class="item-text">性别：</view>
					<picker :range="sexRange" @change="sexChange" style="flex: 1;">
						<label>{{sexDefalut}}</label>
					</picker>
				</view>
				<view class="info-item" @click="notChange('注册时间')">
					<view class="item-text">注册时间：</view>
					<!-- <input class="item-input" v-model="user.createTime"></input> -->
					<uni-dateformat :date="user.createTime" format="yyyy-MM-dd hh:mm:ss"></uni-dateformat>
				</view>
			</view>
			<view class="btn-group">
				<view class="cancelBtn button" @click="cancelEdit">返回</view>
				<view class="confirmBtn button" @click="confirmEdit">保存</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config  from "@/config/app.js"
	export default {
		data() {
			return {
				user: {},
				// 用于性别选择
				sexRange: ["保密", "男", "女"],
				sexIndex: 0,
				sexDefalut: "保密",
				// 用于暂时存储上传图片
				imageList: [],
				//存储图片base64，用于上传后端
				baseImageList: []
			};
		},
		onLoad() {
			this.getInfo()
		},
		methods: {
			getInfo() {
			// 判断是否登录，已登录获取当前登录信息，未登录跳转登录界面
				if (this.$utils.checkLogin()) {
					this.$request.request({
						url: "/user/info"
					}).then(res => {
						console.log(res);
						if (res.code == 401) {
							uni.navigateTo({
								url: "./login"
							})
						} else {
							this.user = res.data;
							if (this.user.sex == 1) {
								this.sexDefalut = "男"
								this.sexIndex = 1
							} else if (this.user.sex == 2) {
								this.sexDefalut = "女"
								this.sexIndex = 2
							}
							if (this.user.logo) {
								this.user.showLogo = config.IMG_URL + this.user.logo
							}
						}
					})
				} else {
					uni.navigateTo({
						url: "./login"
					})
				}
			},
			notChange(str) {
				uni.showToast({
					title: str + "无法修改",
					icon: "none"
				})
			},
			sexChange(e) {
				this.sexIndex = e.target.value;
				this.sexDefalut = this.sexRange[this.sexIndex];
				this.user.sex = this.sexIndex;
			},
			checkInfo() {
				if (this.user.age) {
					if (this.user.age <=0 || this.user.age > 120) {
						uni.showToast({
							title: "年龄非法输入",
							icon: "none"
						})
						return false;
					}
				}
				
				if (this.user.email) {
					var emailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
					if(!emailReg.test(this.user.email)){
					　uni.showToast({
							title: "邮箱格式错误",
							icon: "none"
						})
						return false;
					}
				}
				
				if (this.user.realName) {
					let name = this.user.realName;
					let reg = /^[\u4e00-\u9fa5]{2,15}$/;
					// 保留点后,用来校验的姓名,也是最终校验通过后返回的姓名
					let payerName = name.replaceAll("　", "")
					                    .replaceAll(" ", "")
					                    .replaceAll("•", "·")
					                    .replaceAll("．", "·");
					// 去除所有点后，用来校验的姓名
					let checkName = name.replaceAll("　", "")
					                    .replaceAll(" ", "")
					                    .replaceAll("•", "")
					                    .replaceAll("．", "")
					                    .replaceAll("·", "");
					if(checkName.length === 1){
						uni.showToast({
							title: "姓名至少包含两位汉字，请修正",
							icon: "none"
						})
					  return false;
					}
					if (reg.test(checkName)) {
					  if(payerName.substring(0,1) === '·'){
							uni.showToast({
								title: "姓名第一位不能为【·】，请修正",
								icon: "none"
							})
					    return false;
					  }
						if(payerName.substring(payerName.length - 1) === '·'){
							uni.showToast({
								title: "姓名最后不能为【·】，请修正",
								icon: "none"
							})
					    return false;
					  }
						if(payerName.indexOf("··") !== -1){
							uni.showToast({
								title: "姓名不能有连续的【·】，请修正",
								icon: "none"
							})
					    return false;
					  }
						return payerName;
					} else {
						uni.showToast({
							title: "姓名中只能包含【汉字】和【·】，请修正",
							icon: "none"
						})
					  return false;
					}
				}
				
				return true;
			},
			cancelEdit() {
				uni.switchTab({
					url: "./my"
				})
			},
			confirmEdit() {
				if (this.checkInfo()) {
					var that = this;
					this.$request.request({
						url: "/user/edit",
						method: "POST",
						data: that.user
					}).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: "修改成功，即将跳转...",
								icon: "none"
							})
							setTimeout(function() {
							  uni.switchTab({
							  	url: "./my"
							  })
							}, 1500);
						} else {
							uni.showToast({
								title: "修改失败",
								icon: "none"
							})
						}
					})
				}
			},
			selectLogo() {
				var that = this;
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: 'compressed', //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: function (res) {
				      // that.imageList = that.imageList.concat(res.tempFilePaths);//成功后利用concat方法追加到imageList中
							that.$request.fileUploadImage(res.tempFilePaths[0]).then(fileRes => {
								fileRes = JSON.parse(fileRes)
								uni.showToast({
									title: "头像上传成功，保存生效",
									icon: "none"
								})
								that.user.logo = fileRes.data.urls[0].url;
								that.user.showLogo = config.IMG_URL + that.user.logo;
							});
				    }
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.edit-page {
	
	.logo-bar {
		background: linear-gradient(to bottom right, blue, pink);
		width: 100%;
		height: 400rpx;
		display: flex;
		flex-direction: row;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		
		.user-logo {
			width: 200rpx;
			height: 200rpx;
			border-radius: 200rpx;
			background-color: #FFFFFF;
		}
	}
	
	.info-group {
		margin: 20rpx 10rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 0 20rpx;
		
		.info-item {
			border-bottom: 1rpx #F2F1F6 solid;
			display: flex;
			padding: 20rpx;
			
			.item-text {
				width: 200rpx;
				text-align: right;
			}
			
			.item-input {
				flex: 1;
				line-height: 80rpx;
				text-align: left;
			}
		}
		
	}
	
}
</style>
